import React, { Component } from 'react';
import { Table, Space, Button, Form, Input, DatePicker, Pagination, Divider, message } from 'antd';
import { UnorderedListOutlined, DeleteOutlined, } from '@ant-design/icons'
import styles from './index.less'
import { connect } from "dva"
const { RangePicker } = DatePicker
@connect(({global}) => ({
  userId: global.userId,
}))
class ReceiveForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 0,
      pageSize: 5,
      total: 0,
      shareType: 2,//1 我分享给别人 2：别人分享给我
      username: "",
      shareName: "",
      startTime: "",
      endTime: "",
      data: [],
      rangeTimeValue: "",
    }
    // console.log(this.props)
  }
  componentDidMount = () => {
    // console.log("ccc")
    this.props.getShareListToMe()
  }
  componentWillReceiveProps = (nextProps) => {
    // console.log(nextProps)
    this.setState({ data: nextProps.dataOfToMe, total: nextProps.total })
  }
  //详情
  handleShareDetail = (record) => {

  }

  //删除分享
  handleDelete = (record) => {
    // alert("收藏数据  " + record.name + "   已移除")
    const { dispatch, } = this.props
    dispatch({
      type: "global/deleteShare",
      payload: {
        shareType: 2,
        id: record.id,
        userId: this.props.userId?this.props.userId:""
      }
    }).then((res) => {
      message.success("删除成功")
      this.getShareListToMe()
    })

  }
  //分享时间
  handleRangeOnChange = (value, dateString) => {
    console.log(dateString)
    this.setState({
      startTime: dateString[0],
      endTime: dateString[1],
      currentPage:0
    })
  }
  //分页
  pageChange = (page, pageSize) => {
    console.log(page)
    this.setState({ pageSize: pageSize, currentPage: page }, () => { this.getShareListToMe() })
  }
  //
  pageSizeChange = (current, size) => {
    console.log(size)
    this.setState({ pageSize: size, currentPage: 1 }, () => { this.getShareListToMe() })
  }
  searchShareListToMe=()=>{
    this.setState({
      currentPage:1
    },()=>{
      this.getShareListToMe()
    })
  }
  //获取列表
  getShareListToMe = (params) => {
    const { dispatch } = this.props
    let { currentPage, pageSize, username, shareType, shareName, startTime, endTime } = this.state
    dispatch({
      type: "global/getShareList",
      payload: {
        userId: this.props.userId?this.props.userId:"",
        shareType: shareType,
        text: shareName,
        username: username,
        startTime: startTime,
        endTime: endTime,
        pageSize: pageSize,
        pageNum: currentPage === 0 ? 1 : currentPage
      }
    }).then((res) => {
      console.log(res)
      if (res) {
        res.data.rows.forEach((item, index) => {
          item.key = index
        })
        this.setState({ data: res.data.rows })
      }
    })
  }
  //清除
  clearEvent = (params) => {
    this.setState({
      shareName: "",
      startTime: "",
      endTime: "",
      rangeTimeValue: new Date()
    }, () => { this.getShareListToMe() })

  }


  render() {
    let { currentPage, total, shareName, data, rangeTimeValue } = this.state;

    //表头数据
    const columns = [
      {
        title: '编号',
        dataIndex: 'num',
        key: 'num',
        align: "center",
        render: (text, record, index) => `${index + 1 + currentPage * 10}`,
      },
      {
        title: '分享者',
        dataIndex: 'sharerName',
        align: "center",
        key: 'sharerName',
      },
      {
        title: '资源名称',
        dataIndex: 'title',
        align: "center",
        key: 'title',
      },
      {
        title: '资源发布者',
        dataIndex: 'publisherName',
        align: "center",
        key: 'publisherName',
      },
      {
        title: '资源发布账号',
        key: 'updName',
        align: "center",
        dataIndex: 'updName',
      },
      {
        title: '资源发布时间',
        key: 'onlineTime',
        align: "center",
        dataIndex: 'onlineTime',
      },
      {
        title: '资源分享时间',
        key: 'shareStartTime',
        align: "center",
        dataIndex: 'shareStartTime',
      },
      {
        title: '操作',
        key: 'action',
        align: "center",
        render: (text, record, index) => (
          <Space size="middle">
            {/* <Button type="primary"
              icon={ <UnorderedListOutlined /> }
              size="small" shape="round"
              style={ { background: "#11bf94" } }
              onClick={ () => this.handleShareDetail(record) }>详情</Button> */}
            <Button type="primary"
              icon={<DeleteOutlined />}
              danger
              size="small"
              shape="round"
              onClick={() => this.handleDelete(record)}>移除</Button>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div style={{ background: "white" }}>
          <div className={styles.form}>
            <Form
              layout="inline"
            >
              <Form.Item
                label="关键字"
              // rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Input
                  placeholder="请输入关键字"
                  value={shareName}
                  onChange={(e) => { this.setState({ shareName: e.target.value,currentPage:0 }) }} />
              </Form.Item>
              <Form.Item
                label="分享时间"
              >
                <RangePicker
                  key={rangeTimeValue}
                  showTime
                  format="YYYY/MM/DD HH:mm:ss"
                  onChange={this.handleRangeOnChange}
                />
              </Form.Item>

              <Form.Item>
                <Button type="primary" onClick={this.searchShareListToMe}>查询</Button>
                <Button type="default" style={{ marginLeft: "10px" }} onClick={this.clearEvent}>清空</Button>
              </Form.Item>
            </Form>
          </div>
          <Divider />
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
          />
        </div>
        <div className={styles.pagination}>
          <Pagination
            total={total}
            showSizeChanger
            showQuickJumper
            current={currentPage === 0 ? 1 : currentPage}
            defaultCurrent={1}
            defaultPageSize={5}
            pageSizeOptions={[5,10, 20, 50]}
            showTotal={total => `共 ${total} 条`}
            onChange={this.pageChange}
            onShowSizeChange={this.pageSizeChange}
          />
        </div>
      </div>
    );
  }
}

export default ReceiveForm;